<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 130px">
            <el-option label="备库需求单号" value="demand_no"></el-option>
            <el-option label="备料计划单号" value="plan_no"></el-option>
            <el-option label="产品名称" value="sku_cn_title"></el-option>
            <el-option label="ASIN" value="asin"></el-option>
          </el-select>
          <VBatchInput v-model="form.input.value" @search="query" class="w-60" />
        </VGroup>
        <VGroup>
          <el-select v-model="form.skuInfo.type" class="w-28">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="赛盒SKU" value="sai_he_sku"></el-option>
            <el-option label="自定义sku" value="custom_sku"></el-option>
          </el-select>
          <VBatchInput v-model="form.skuInfo.value" @search="query" class="w-60" />
        </VGroup>
        <VSelect v-model="form.demand_form" :options="options.demand_form" multiple collapse-tags style="min-width: 160px" placeholder="备库需求单类型" />
        <VSelect v-model="form.demand_type" placeholder="备库需求类型" :options="options.demand_type" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.user.type" style="width: 130px">
            <el-option label="采购人员" value="purchase_user_id"></el-option>
            <el-option label="开发人员" value="develop_user_id"></el-option>
            <el-option label="供应商负责人员" value="director_id"></el-option>
            <el-option label="申请人员" value="create_user_id"></el-option>
          </el-select>
          <VCascader v-model="form.user.value" placeholder="人员" multiple collapse-tags filterable clearable style="min-width: 160px" />
        </VGroup>
        <VCascader v-model="form.department_name" placeholder="需求部门" type="department" multiple collapse-tags filterable clearable checkStrictly style="min-width: 160px" />
        <VSelect v-model="form.supplier_id" type="supplier" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="供应商" />
        <VGroup>
          <el-select v-model="form.warehouse.type" class="w-28" @change="form.warehouse.value = []">
            <el-option label="目的仓平台" value="destination_warehouse"></el-option>
            <el-option label="目的仓" value="plan_destination_warehouse"></el-option>
          </el-select>
          <VSelect v-if="form.warehouse.type === 'destination_warehouse'" v-model="form.warehouse.value" placeholder="请选择" :options="options.destination_warehouse" multiple
            collapse-tags style="min-width: 160px" />
          <VSelect v-else v-model="form.warehouse.value" placeholder="请选择" :options="options.plan_destination_warehouse" multiple collapse-tags style="min-width: 160px" />
        </VGroup>
        <VSelect v-model="form.country" placeholder="国家" :options="options.country" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.process_order_status" placeholder="生单状态" :options="options.process_order_status" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VCascader v-model="form.sale_id" placeholder="负责销售" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.transport_type" placeholder="运输方式" :options="options.transport_type" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.is_drawback" placeholder="是否退税" :options="options.is_drawback" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.new.type" style="width: 130px">
            <el-option label="是否新品" value="is_new"></el-option>
            <el-option label="是否特采" value="is_special_purchase"></el-option>
          </el-select>
          <VSelect v-model="form.new.value" placeholder="请选择" :options="options.is_new" multiple collapse-tags style="min-width: 160px" />
        </VGroup>
        <VSelect v-model="form.is_dangerous" placeholder="是否危险品" :options="options.is_dangerous" multiple collapse-tags style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">采购周期</div>
          <el-input-number v-model="form.purchase_day.start" placeholder="最小" :controls="false" :min="0" :step="1" :precision="0" class="w-32" />
          <div class="v-group-item">-</div>
          <el-input-number v-model="form.purchase_day.end" placeholder="最大" :controls="false" :min="0" :step="1" :precision="0" class="w-32" />
        </VGroup>
        <VSelect v-model="form.payment_type" placeholder="付款方式" :options="options.payment_type" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.period_id" placeholder="结算方式" type="period" multiple collapse-tags filterable clearable style="min-width: 220px" />
        <VSelect v-model="form.is_order_due" placeholder="下单是否逾期" :options="options.is_order_due" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.reject_type" placeholder="驳回原因" :options="options.reject_type" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VSelect v-model="form.is_order" placeholder="是否完全下单" :options="options.is_order" select filterable clearable style="width: 130px" />
        <VSelect v-model="form.platform" :options="options.platform" multiple collapse-tags filterable clearable style="min-width: 160px" placeholder="平台" />
        <VSelect v-model="form.is_purchase_plan" placeholder="是否有备料" :options="options.is_purchase_plan" multiple collapse-tags filterable clearable
          style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 100px">
            <el-option label="申请日期" value="create_time"></el-option>
            <el-option label="审核日期" value="audit_time"></el-option>
            <el-option label="需求日期" value="demand_time"></el-option>
          </el-select>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
       <VSelect v-model="form.is_custom_product" :options="options.is_custom_product" multiple collapse-tags filterable clearable style="min-width: 140px" placeholder="是否定制化" />
      </template>
      <template #toolbar_btns>
        <div class="flex justify-between w-full">
          <div class="flex items-center gap-2 flex-wrap flex-1">
            <VButton auth="/purchase/manage/order/generate_purchase_order" type="primary" :loading="loadings.addOrder" @click="handleBatch('addOrder')">
              <svg-icon icon-class="sc" class="mr-1" style="font-size: 15px" />手动生成采购单
            </VButton>
            <VButton auth="/purchase/manage/order/batchOrder" type="primary" :loading="loadings.batchOrder" @click="handleBatch('batchOrder')">
              <svg-icon icon-class="sc" class="mr-1" style="font-size: 15px" />一键生成采购单
            </VButton>
            <VButton auth="/purchase/manage/order/suspend_order" @click="handleBatch('pause')">暂停下单</VButton>
            <VButton auth="/purchase/manage/order/purchase_rejection" @click="handleBatch('reject')">采购驳回</VButton>
            <VButton auth="/purchase/manage/order/supplier_owner_confirmation" @click="handleBatch('confirm')">供应商负责人确认
            </VButton>
            <VButton auth="/purchase/manage/order/updatePurchase" @click="handleBatch('updatePurchase')">调整采购
            </VButton>
            <VTotal ref="totalRef" url="/v1/purchase/purchase-order/total"
              :options="[{ title: '24小时未下单', key: 'one_day' }, { title: '48小时未下单', key: 'two_day' }, { title: '72小时未下单', key: 'three_day' }, { title: 'FBA未下单金额', key: 'fba' }, { title: '海外仓未下单金额', key: 'oversea' }]"
              class="ml-auto" />
            <div class="ml-auto"></div>
          </div>
          <div class="flex" style="flex: 0 0 100px">
            <VExport auth="/purchase/manage/order/derive" mainKey="pdcs_id" name="purchase_order" :tableRef="tableRef" task class="ml-auto" />
          </div>
        </div>
      </template>
    </VTable>
    <Pause ref="pauseRef" @success="query" />
    <Log ref="plogRef" />
    <VLog ref="logRef" />
    <Reject ref="rejectRef" :options="options" @success="query" />
    <UpdateSupplier ref="updateSupplierRef" :options="options" @success="query" />
    <UpdatePurchase ref="updatePurchaseRef" @success="query" />
    <MoreRecords v-model="moreRecordsVisible" :id="moreRecordsId" :type="moreRecordsType" @close="moreRecordsId = null, moreRecordsType = null" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Pause from './components/Pause'
import Reject from './components/Reject'
import Log from './components/Log'
import UpdatePurchase from './components/UpdatePurchase'
import VTotal from '@/components/VTotal'
import proApi from '@/views/manage/process/api'
import UpdateSupplier from '@/views/supplier/data/components/Add/index.vue'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
import SimpleTable from '@/components/SimpleTable'
import { $auth, yesno } from "@/utils"
import { resMessage } from "@/utils/res"
import MoreRecords from '@/components/MoreRecords/index.vue'
const router = useRouter()

const baseName = 'purchase_demand'
const tableRef = ref()
const totalRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: 'purchase' }).then(res => res.data),
  getOption({ type: baseName }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

// 批量操作
const updatePurchaseRef = ref()
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const pdcs_ids = selection.map(d => d.pdcs_id)
  const showLoading = () => loadings[name] = true
  const closeLoading = () => loadings[name] = false
  const handle = {
    updatePurchase: () => {
      updatePurchaseRef?.value.open(pdcs_ids)
    },
    addOrder: async () => {
      try {
        showLoading()
        await proApi.getDetail({ pdcs_ids })
        closeLoading()
        const { yes } = yesno(selection, (d) => [5, 6].includes(d.process_order_status))
        if (!yes) return
        const path = `/manage/process/create/${yes.map(d => d.pdcs_id).join(',')}`
        sessionStorage.setItem(`PREV_ROUTER:${path}`, '/manage/order')
        router.push(path)
      } catch (error) {
        console.log('error', error)
      }
      closeLoading()
    },
    batchOrder: async () => {
      const { yes, no } = yesno(selection, (d) => [5, 6].includes(d.process_order_status))
      if (!yes) return
      showLoading()
      api.processCreate({ pdcs_ids: yes.map(d => d.pdcs_id) }).then(res => {
        resMessage({
          res,
          success: () => {
            ElMessage.success('生成成功')
            query()
          }
        })
      }).finally(closeLoading)
    },
    pause: () => {
      pauseRef?.value.open(pdcs_ids)
    },
    reject: () => {
      rejectRef?.value.open(pdcs_ids)
    },
    confirm: () => {
      ElMessageBox.confirm('是否确认该sku可进行下单采购？', '取消', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          showLoading()
          api.confirm({ pdcs_ids }).then(res => {
            ElMessage.success('操作成功')
            query()
          }).finally(closeLoading)
        })
        .catch(() => {
          ElMessage({ type: 'info', message: '取消操作', })
        })
    },
    plan: () => {
      showLoading()
      api.plan({ pds_ids: selection.map(d => d.pds_id) }).then(res => {
        ElMessage.success('操作成功')
        query()
      }).finally(closeLoading)
    }
  }
  handle[name]()
}

// 单行操作
const pauseRef = ref()
const rejectRef = ref()
const updateSupplierRef = ref()
const plogRef = ref()
const logRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { pdcs_id, pds_id, pd_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    remark: () => {
      const {purchase_remark: remark} = row
      api.remark({pds_id, remark}).then(res => {
        ElMessage.success('操作成功')
      })
    },
    addPro: async () => {
      try {
        await proApi.getDetail({ pdcs_ids: [pdcs_id] })
        const path = `/manage/process/create/${pdcs_id}`
        sessionStorage.setItem(`PREV_ROUTER:${path}`, '/manage/order')
        router.push(path)
      } catch (error) {
        console.log('error', error)
      }
    },
    suppler: () => {
      if (![1, 5, 6].includes(row.supplier_audit_status)) {
        ElMessage.error('供应商当前状态不允许编辑!')
        return
      }
      updateSupplierRef?.value.open(row.s_id)
    },
    confirm: () => {
      ElMessageBox.confirm('是否确认该sku可进行下单采购？', '取消', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          showLoading()
          api.confirm({ pdcs_ids: [pdcs_id] }).then(res => {
            ElMessage.success('操作成功')
            query()
          }).finally(closeLoading)
        })
        .catch(() => {
          ElMessage({ type: 'info', message: '取消操作', })
        })
    },
    reject: () => {
      rejectRef?.value.open([pdcs_id])
    },
    create: () => {
      showLoading()
      api.create({ pdcs_id }).then(res => {
        ElMessage.success('操作成功')
        query()
      }).finally(closeLoading)
    },
    continue: () => {
      showLoading()
      api.continue({ pdcs_ids: [pdcs_id] }).then(res => {
        resMessage({
          res,
          success: () => {
            ElMessage.success('操作成功')
            query()
          }
        })
      }).finally(closeLoading)
    },
    pause: () => {
      pauseRef?.value.open([pdcs_id])
    },
    toPath: () => {
      sessionStorage.setItem('_table_form', JSON.stringify({ tableForm: { input: { type: 'demand_no', value: row.demand_no } } }))
      router.push('/demand/demand')
    },
    toProduct: () => {
      sessionStorage.setItem('_table_form', JSON.stringify({ tableForm: { skuInfo: { type: 'sku', value: row.sku } } }))
      router.push('/product/product')
    },
    log: () => {
      logRef?.value.open({ log_type: 'purchase_demand_sku', pds_id: pdcs_id, pd_id })
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 152 },
  showHeaderOverflow: false,
  formConfig: {
    data: {
      input: { type: 'demand_no', value: '' },
      new: { type: 'is_new', value: '' }, // 组合
      skuInfo: { type: 'sku', value: '' },
      user: { type: 'purchase_user_id', value: [] },
      warehouse: { type: 'destination_warehouse', value: [] },
      purchase_day: {},
      dateRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'checkbox', width: 40, fixed: 'left' },
    {
      width: 150, slots: {
        header: () => <div>备库需求单号</div>,
        default: ({ row }) => <div>
          <VText value={row.demand_no} type='link' onClick={() => handleRow('toPath', row)} />
          <VText title='需求单类型' value={row.demand_form_name} />
          </div>
      }
    },
    {
      width: 180, slots: {
        header: () => <div>申请部门<br />申请人<br />审核通过时间<br/>提交需求时间</div>,
        default: ({ row }) => <div>
          <VText value={row.department_name}></VText>
          <VText value={row.create_user}></VText>
          <VText value={row.audit_time}></VText>
          <VText value={row.submit_time}></VText>
        </div>
      }
    },
    {
      width: 150, slots: {
        header: () => <div>备库类型<br/>平台<br />国家<br />目的仓</div>,
        default: ({ row }) => <div>
          <VText value={row.demand_type_name}></VText>
          <VText value={row.platform_name}></VText>
          <VText value={row.country_name}></VText>
          <VText value={row.destination_warehouse_name}></VText>
        </div>
      }
    },
    {
      width: 150, slots: {
        header: () => <div>运输方式<br />需求日期</div>,
        default: ({ row }) => <div>
          <VText value={row.transport_type_name}></VText>
          <VText value={row.demand_time}></VText>
        </div>
      }
    },
    {
      width: 200, slots: {
        header: () => <div>备料信息</div>,
        default: ({ row, rowIndex }) => <VMore key={rowIndex}>
          {{
            default: (line) => (row.plan_data || []).map(d => <div class='w-full'>
          <VText title='备料单号' value={d.plan_no}></VText>
          <VText title='备料数量' value={d.plan_num}></VText>
          <VText title='预计到货时间' value={d.pre_factory_time}></VText>
            </div>)
          }}
        </VMore>
      }
    },
    {
      width: 180, slots: {
        header: () => <div>SKU<br />自定义SKU<br />产品状态<br />采购周期</div>,
        default: ({ row }) => <div>
          <VText title="需求ID" value={row.sku_no} />
          <VText value={row.sku} type='link'>
            <el-link link type='primary' onClick={() => handleRow('toProduct', row)}>{row.sku}</el-link>
            {row.is_new === 2 ? <el-tag type="success" effect="dark" size='small' class='mx-1'>新</el-tag> : ''}
            {row.is_special_purchase === 2 ? <el-tag type="danger" size='small' effect="dark">特</el-tag> : ''}
            {row.is_dangerous === 2 ? <svg t="1731396340885" class="-mt-[1px]" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7755" width="24" height="24"><path d="M426.14784 160.23552l-368.27136 628.736a102.4 102.4 0 0 0 88.35072 154.17344h736.54272a102.4 102.4 0 0 0 88.35072-154.17344l-368.2304-628.736a102.4 102.4 0 0 0-176.7424 0z" fill="#FADE14" p-id="7756"></path><path d="M545.54624 158.96576a61.44 61.44 0 0 1 21.95456 21.99552l368.27136 628.736a61.44 61.44 0 0 1-53.00224 92.48768H146.2272a61.44 61.44 0 0 1-53.00224-92.48768l368.2304-628.736a61.44 61.44 0 0 1 84.09088-21.99552z m-63.73376 28.34432l-2.6624 3.97312-368.27136 628.736a40.96 40.96 0 0 0 30.55616 61.44l4.79232 0.24576h736.54272a40.96 40.96 0 0 0 37.51936-57.42592l-2.17088-4.25984-368.27136-628.736a40.96 40.96 0 0 0-68.03456-3.97312z" fill="#333333" p-id="7757"></path><path d="M450.1504 397.47584a385.26976 385.26976 0 0 1-123.2896 123.2896l19.6608 23.7568c12.288-8.6016 24.576-17.6128 36.864-27.4432v85.1968c-1.6384 67.1744-20.48 119.1936-56.5248 156.8768l23.7568 21.2992c39.3216-44.6464 60.2112-104.0384 62.2592-178.176v-66.7648h277.2992v-28.672h-121.6512c16.384-13.9264 33.1776-31.1296 49.9712-50.7904v-21.2992h-158.1056c6.9632-9.8304 13.5168-20.0704 20.0704-30.72l-30.3104-6.5536z m79.872 109.3632H395.6736c15.9744-14.336 31.1296-29.9008 45.4656-46.6944h138.8544c-16.384 17.6128-33.1776 33.1776-49.9712 46.6944z m73.728 101.5808v38.0928c0 13.1072-5.3248 19.6608-15.9744 19.6608-14.7456 0-31.1296-0.8192-49.152-2.4576l6.9632 27.8528c17.2032 0.8192 34.816 1.2288 52.8384 1.2288 23.3472-0.8192 35.2256-13.5168 35.2256-37.2736v-73.3184h-169.1648v153.6c0 24.576 13.1072 36.864 40.1408 36.864h129.4336c23.3472 0 39.3216-3.6864 47.5136-10.24 9.0112-8.192 15.1552-30.72 18.8416-66.7648l-28.2624-9.0112c-2.4576 23.7568-5.7344 39.7312-10.6496 47.9232-4.5056 6.9632-16.384 10.6496-35.2256 10.6496h-109.7728c-14.7456 0-22.1184-6.5536-22.1184-19.2512v-117.5552h109.3632z" fill="#333333" p-id="7758"></path></svg> : ''}
          </VText>
          <div>{row.custom_sku || '-'}</div>
          <div>{row.sku_status_name || '-'}</div>
          <div>{row.purchase_day && (row.purchase_day + '天') || '-'}</div>
          <VText title='是否退税' value={row.is_refund_tax_name} />
          <VText title='是否定制化' value={row.is_custom_product_name} />
        </div>
      }
    },
    {
      minWidth: 120, slots: {
        header: () => <div>辅助关系</div>,
        default: ({ row }) => <div>
          <VText value={row.main_sku} title="主"></VText>
          <VText value={row.ass_sku} title="辅">
            {row?.ass_sku?.map(item=>{
              return <div>{item.sku}*{item.quantity_auxiliary}</div>
            })}
          </VText>
        </div>
      }
    },
    {
      title: '图片', width: 100, slots: {
        default: ({ row }) => <VImage src={row.main_img} size="80px"></VImage>
      }
    },
    {
      width: 220, slots: {
        header: () => <div>是否为组合sku</div>,
        default: ({ row }) => <div>
          <VText value={row.is_combination_name} />
          {row.is_combination === 2 ? <VText title='组合sku'>{row.combination_sku}</VText> : ''}
          {row.is_combination === 2 ? <VText title='数量'>{row.combination_demand_num}</VText> : ''}
        </div>
      }
    },
    {
      width: 140, slots: {
        header: () => <div>ASIN</div>,
        default: ({ row }) => row.asin || '-'
      }
    },
    {
      width: 140, slots: {
        header: () => <div>产品中文品名</div>,
        default: ({ row }) => <VText value={row.sku_cn_title} line={3} />
      }
    },
    {
      width: 140, slots: {
        header: () => <div>品类</div>,
        default: ({ row }) => <VText value={row.attribute_name} line={3} />
      }
    },
    {
      width: 140, slots: {
        header: () => <div>采购<br />开发</div>,
        default: ({ row }) => <div>
          <VText title='采' value={row.purchase_user} />
          <VText title='开' value={row.develop_user} />
        </div>
      }
    },
    {
      width: 260, slots: {
        header: () => <div>供应商信息</div>,
        default: ({ row }) => {
          const isAuth = [1, 5, 6].includes(row.supplier_audit_status) && $auth('/purchase/supplier/data/edit')
          return <div>
            <VText title='供应商' value={row.supplier_name} copy type={isAuth ? 'button' : undefined} onClick={() => isAuth && handleRow('suppler', row)}>
            </VText>
            <VText title='供应商id' value={row.supplier_code} />
            <VText title='供应商类型' value={row.purchase_type_name} />
            <VText title='结算方式' value={row.period_name} />
            <VText title='是否开票' value={row.is_invoice_name} />
            <VText title='供应商负责人' value={row.director_name} />
            <VText title='供应商备注' value={row.supplier_remark} />
          </div>
        }
      }
    },
    {
      width: 100, slots: {
        header: () => <div>需求数<br />单价<br />总金额</div>,
        default: ({ row }) => <div>
          <VText title='数量'>{row.demand_num}</VText>
          <VText title='单价'>{row.purchase_price}</VText>
          <VText title='总价'>{row.total_price}</VText>
        </div>
      }
    },
    {
      width: 360, slots: {
        header: () => <div>需求信息</div>,
        default: ({ row, rowIndex }) => <SimpleTable key={rowIndex} columns={[{ title: '销售', field: 'sale_name', span: 2 }, { title: '数量', field: 'demand_num' }, { title: '部门', field: 'department_name', span: 4 }]} data={row.detail_info} line={3} />
      }
    },
    {
      width: 100, slots: {
        header: () => <div>待下单数量</div>,
        default: ({ row }) => row.leave_num
      }
    },
    {
      width: 100, slots: {
        header: () => <div>生单状态</div>,
        default: ({ row }) => <VText value={row.process_order_status_name} line={3} />
      }
    },
    {
      width: 200, slots: {
        header: () => '采购暂停信息',
        default: ({ row }) => <div>
          <VText title='人员'>{row.pause_user}</VText>
          <VText title='时间'>{row.pause_time}</VText>
          <VText title='原因' value={row.pause_reason} line={3} />
          <el-button link type="primary" onClick={() => handleMoreRecords(row, 1)}>更多记录</el-button>
        </div>
      }
    },
    {
      width: 180, slots: {
        header: () => '采购驳回信息',
        default: ({ row, rowIndex }) => {
          return <div>
            <VText title='人员' value={row.reject_user}></VText>
            <VText title='数量' value={row.reject_num}></VText>
            <VText title='原因' value={row.reject_type_name} />
            <VText title='备注' value={row.reject_reason} line={2} />
            <el-button link type="primary" onClick={() => handleMoreRecords(row, 2)}>更多记录</el-button>
          </div>
        }
      }
    },
    {
      width: 120, slots: {
        header: () => <div>计划备注</div>,
        default: ({ row }) => <VText value={row.detail_remark} line={3} />
      }
    },
    {
      width: 120, slots: {
        header: () => <div>采购备注</div>,
        default: ({ row }) => <div>
          <el-input v-model={row.purchase_remark} type="textarea" rows={4} placeholder="请输入" onChange={() => handleRow('remark', row)} />
          <VText value='更多记录' type='button' onClick={() => plogRef?.value.open(row.pds_id)} />
        </div>
      }
    },
    {
      title: '操作', width: 120, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { process_order_status } = row
          // process_order_status	生单状态: 1等待审核完成 2待供应商负责人确认 3需求驳回 4采购暂停 5待下单 6部分下单 7已全部下单 8取消采购
          return <div class='nm flex flex-wrap gap-1'>
            {[2, 3].includes(process_order_status) ? <VButton auth="/purchase/manage/order/supplier_owner_confirmation" link type="primary" loading={loadings['confirm' + rowIndex]} onClick={() => handleRow('confirm', row, rowIndex)}>确认</VButton> : ''}
            {[5, 6].includes(process_order_status) ? <VButton auth="/purchase/manage/order/generate_purchase_order" link type="primary" loading={loadings['addPro' + rowIndex]} onClick={() => handleRow('addPro', row, rowIndex)}>手动生成采购单</VButton> : ''}
            {[2, 3, 5].includes(process_order_status) ? <VButton auth="/purchase/manage/order/supplier_owner_confirmation" link type="primary" loading={loadings['pause' + rowIndex]} onClick={() => handleRow('pause', row, rowIndex)}>暂停下单</VButton> : ''}
            {[4].includes(process_order_status) ? <VButton auth="/purchase/manage/order/continue" link type="primary" loading={loadings['continue' + rowIndex]} onClick={() => handleRow('continue', row, rowIndex)}>继续下单</VButton> : ''}
            {[5].includes(process_order_status) ? <VButton auth="/purchase/manage/order/purchase_rejection" link type="primary" loading={loadings['reject' + rowIndex]} onClick={() => handleRow('reject', row, rowIndex)}>驳回</VButton> : ''}
            <VButton auth="/purchase/manage/order/log" link type="primary" onClick={() => handleRow('log', row)}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => {
        totalRef?.value.update({ ...form, ...page })
        return api.query({ ...form, ...page })
      }
    }
  }
})
const moreRecordsVisible = ref(false)
const moreRecordsId = ref(null)
const moreRecordsType = ref(null)
const handleMoreRecords = (row, type) => {
  moreRecordsVisible.value = true
  moreRecordsId.value = row.pds_id
  moreRecordsType.value = type
}
</script>
  